<template>
  <div class="app-page">
    <el-button type="primary" @click="addRowHandle">
      增加
    </el-button>
    <el-button type="primary" @click="editRowHandle({})">
      编辑
    </el-button>
    <ruleFormDialog v-if="dialogVisible" :visible.sync="dialogVisible" :detail-data="detailData" :is-edit="isEdit" @success="successHandle"></ruleFormDialog>
  </div>
</template>
<script>
import ruleFormDialog from './children/ruleFormDialog'
export default {
  name: 'AddEditDialog',
  components: {
    ruleFormDialog
  },
  data () {
    return {
      // 显示弹窗
      dialogVisible: false,
      // 详情数据
      detailData: {},
      // 是否是编辑
      isEdit: false
    }
  },
  methods: {
    // 增加
    addRowHandle () {
      this.dialogVisible = true
      this.isEdit = false
      this.detailData = {}
    },
    // 编辑
    editRowHandle (row) {
      this.dialogVisible = true
      this.isEdit = true
      this.detailData = row
    },
    successHandle () {
      // this.getTableData()
      console.log('success')
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-page {
  padding: 30px;
}
</style>
